<template>
  <el-row>
    <el-col :xl="12" :lg="16">

      <h2>{{form.name || "新增菜单"}}</h2>
      <el-form :model="form" :rules="rules" ref="form" label-width="80px" label-position="right">

        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="form.name" clearable placeholder="菜单显示名字"></el-input>
        </el-form-item>

        <el-form-item label="上级菜单" prop="parent_id" v-show="!form.top">
          <el-cascader v-model="form.parent_id" :options="menu" style="width:100%" :props="menuProps" :show-all-levels="false" clearable></el-cascader>
          <div class="el-form-item-msg">上级菜单，如果不选择则为顶级菜单。</div>
        </el-form-item>

        <el-form-item label="类型" prop="type">
          <el-radio-group v-model="form.type">

            <el-radio-button
              label="M"
            >菜单</el-radio-button>

            <el-radio-button
              label="B"
              v-if="!form.top"
            >按钮</el-radio-button>

            <el-radio-button
              label="L"
              v-if="!form.top"
            >外链</el-radio-button>

            <el-radio-button
              label="I"
              v-if="!form.top"
            >Iframe</el-radio-button>

          </el-radio-group>
        </el-form-item>

        <el-form-item label="代码标识" prop="code">
          <el-input v-model="form.code" clearable placeholder="菜单代码"></el-input>
          <div class="el-form-item-msg">系统唯一且与内置组件名一致，否则导致缓存失效。如类型为Iframe的菜单，别名将代替源地址显示在地址栏</div>
        </el-form-item>

        <el-form-item label="菜单图标" prop="icon" v-if="form.type != 'B'">
          <sc-icon-select v-model="form.icon" clearable style="width:100%"></sc-icon-select>
        </el-form-item>

        <el-form-item label="路由地址" prop="route" v-if="form.type != 'B'">
          <el-input v-model="form.route" clearable placeholder="请输入路由地址"></el-input>
        </el-form-item>

        <el-form-item label="重定向" prop="redirect" v-if="form.type != 'B' && form.type == 'M'">
          <el-input v-model="form.redirect" clearable placeholder="重定向地址"></el-input>
          <div class="el-form-item-msg">如果有重定向，那么路由地址将不会生效</div>
        </el-form-item>

        <el-form-item label="组件" prop="component" v-if="form.type != 'B' && form.type == 'M'">
          <el-autocomplete v-model="form.component" :fetch-suggestions="querySearch" :debounce="10" clearable style="width:100%" placeholder="请选择组件"></el-autocomplete>
          <div class="el-form-item-msg">如父节点、链接或Iframe等没有视图的菜单不需要填写</div>
        </el-form-item>

        <el-form-item label="排序" prop="sort" v-if="form.type != 'B'">
          <el-input-number v-model="form.sort" controls-position="right" :min="0" :max="999"></el-input-number>
          <div class="el-form-item-msg">菜单排序，数字大的在前面</div>
        </el-form-item>

        <el-form-item label="是否隐藏" prop="is_hidden" v-if="form.type != 'B'">
          <el-radio-group v-model="form.is_hidden">
            <el-radio label="0">是</el-radio>
            <el-radio label="1">否</el-radio>
          </el-radio-group>
          <div class="el-form-item-msg" true-label="0" false-label="1" label="0">菜单不显示在导航中，但用户依然可以访问，例如详情页</div>
        </el-form-item>

        <el-form-item label="是否停用" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio label="0">启用</el-radio>
            <el-radio label="1">停用</el-radio>
          </el-radio-group>
          <div class="el-form-item-msg" true-label="0" false-label="1" label="0">停用的菜单不会在导航中，也无法访问</div>
        </el-form-item>

        <el-form-item label="生成按钮" prop="restful" v-if="! form.id && form.type == 'M' ">
          <el-radio-group v-model="form.restful">
            <el-radio label="0">生成</el-radio>
            <el-radio label="1">不生成</el-radio>
          </el-radio-group>
          <div class="el-form-item-msg" true-label="0" false-label="1" label="1">生成RESTful路由按钮菜单，即：save、update、delete、read、import、export 以及回收站相关按钮菜单</div>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm" :loading="loading">保 存</el-button>
        </el-form-item>
      </el-form>

    </el-col>
  </el-row>

</template>

<script>
  import scIconSelect from '@/components/scIconSelect'

  export default {
    components: {
      scIconSelect
    },
    props: {
      menu: { type: Object, default: () => {} },
    },
    data(){
      return {
        form: {
          id: undefined,
          parent_id: undefined,
          top: undefined,
          isBtn: undefined,
          levels: [],
          name: '',
          route: '',
          component: '',
          redirect: '',
          code: '',
          status: '0',
          is_hidden: '0',
          icon: '',
          sort: 0,
          type: 'M',
          restful: '1'
        },
        menuProps: {
          value: 'id',
          label: 'name',
          checkStrictly: true
        },
        level: [],
        rules: {
          name:  [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
          code:  [{ required: true, message: '请输入标识代码', trigger: 'blur' }],
          route: [{ required: true, message: '请输入路由', trigger: 'blur' }]
        },
        views: [],
        loading: false
      }
    },
    mounted() {
      this.views = this.getViews();
    },
    methods: {
      //表单注入数据
      setData(data, pid){
        this.form = data
        this.form.parent_id = pid
        //可以和上面一样单个注入，也可以像下面一样直接合并进去
        //Object.assign(this.form, data)
      },

      submitForm () {
        this.loading = true
        this.$refs.form.validate(valid => {
          if (valid) {
            if (! this.form.parent_id) {
              this.form.parent_id = 0
            }
            this.form.children = undefined
            // 新增
            if (! this.form.id) {
              this.$API.menu.save(this.form).then(res => {
                this.$message.success(res.message)
                this.loading = false
                this.$emit('ok')
              })
            // 更新
            } else {
              this.$API.menu.update(this.form.id, this.form).then(res => {
                this.$message.success(res.message)
                this.loading = false
                this.$emit('ok')
              })
            }
          } else {
            this.loading = false
            return false
          }
        })
      },

      //获取所有视图组件
      getViews(){
        const filesUrl = []
        //不知道为什么 require.context 会引起Webpack会一并把结果都打包进来使得此文件过大
        let files = require.context('@/views', true, /\.vue$/)
        files.keys().forEach(file => {
          // 如需删除index? .replace(/\/index$/, "")
          filesUrl.push({
            value: file.replace(/^\.\/(.*)\.\w+$/, '$1')
          })
        })
        return filesUrl;
      },

      // 视图组件列表过滤
      querySearch(queryString, cb){
      	let results = this.getViews();
        cb(results.filter(item => item.value.indexOf(queryString) !== -1))
      }
    }
  }
</script>

<style scoped lang="scss">
  h2 {font-size: 17px;color: #3c4a54;padding:0 0 30px 0;}
  [data-theme='dark'] { 
    h2 { color: #fff; }
  }
  :deep(.el-form-item__content) {
    display: block;
  }
</style>
